<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import http from '@/utils/api.js';

const pieChart = ref(null);  // 用来存放饼状图的容器
const categoryData = ref([]);  // 分类数据

// 获取分类商品数量数据
async function loadCategoryProductCount() {
  try {
    const response = await http.get('/category/count');  // 获取分类商品数量
    console.log('返回的分类商品数量数据：', response);
    if (Array.isArray(response)) {  // 确保返回的是数组
      categoryData.value = response;
    } else {
      console.error("返回的数据格式不正确，应该是数组");
    }

    // 绘制饼状图
    const chart = echarts.init(pieChart.value);
    const option = {
      title: {
        text: '商品分类分布',
        subtext: '商品种类统计',
        left: 'center',
        top: '20',  // 可以调整标题的垂直位置
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      series: [
        {
          name: '商品种类数量',
          type: 'pie',
          radius: '50%',  // 确保饼图是一个完整的圆形
          data: categoryData.value.length > 0 ? categoryData.value.map(item => ({
            value: item.productCount,
            name: item.categoryName
          })) : [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    chart.setOption(option);
  } catch (error) {
    console.error('获取分类商品数量失败:', error);
  }
}

onMounted(() => {
  loadCategoryProductCount();
});
</script>

<template>
  <div class="pie-chart-container">
    <div ref="pieChart" class="pie-chart" />
  </div>
</template>

<style scoped>
.pie-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;  /* 确保父容器占满高度 */
}

.pie-chart {
  width: 80%;  /* 控制图表的宽度 */
  height: 400px;  /* 设置固定高度 */
}
</style>
